<template>
	<view class="sqTitTabNav hasFlex" :style="{width:(searchWid- 50) + 'px',height:navigationBarHeight + 'px'}">
		<view class="sqTitNavItem"
			:class="[typeTabIndex == index ? 'active' : '']"
			v-for="(item,index) in typeTabNav"
			:key="index"
			@tap="switchTypeTab(index,item)"
		>{{item.name}}</view>
		<slot name="rightBar" v-if="$slots.rightBar"></slot>
	</view>
</template>

<script>
	export default {
		props:{
			typeTabNav:Array,
			typeTabIndex:Number
		},
		data(){
			return{
				searchWid:getApp().globalData.menuBarLeft,
				navigationBarHeight:getApp().globalData.navigationBarHeight
			}
		},
		methods:{
			switchTypeTab(index,item){
				this.$emit('switchTypeTab',index,item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sqTitTabNav{
		margin-left: $sqBackWid;
		position: relative;
		.sqTitNavItem{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			opacity: .6;
			&.active{
				font-size: 32rpx;
				opacity: 1;
				font-weight: 600;
			}
		}
	}
</style>